import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import Qt5Compat.GraphicalEffects

Window {
    width: 400
    height: 300
    visible: true
    title: qsTr("Slider - 自定义样式")
    color: "#2c3e50"

    Column {
        anchors.centerIn: parent
        spacing: 20

        // 值显示
        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            text: Math.round(customSlider.value)
            color: "#ecf0f1"
            font.pixelSize: 18
        }

        // 滑块
        Slider {
            id: customSlider
            width: 300
            height: 40
            from: 0
            to: 100
            value: 50

            // 背景轨道
            background: Rectangle {
                x: customSlider.leftPadding
                y: customSlider.topPadding + customSlider.availableHeight / 2 - height / 2
                width: customSlider.availableWidth
                height: 4
                radius: 2
                color: "#34495e"

                // 已完成部分
                Rectangle {
                    width: customSlider.visualPosition * parent.width
                    height: parent.height
                    color: "#2ecc71"
                    radius: 2
                }
            }

            // 手柄
            handle: Rectangle {
                x: customSlider.leftPadding + customSlider.visualPosition * (customSlider.availableWidth - width)
                y: customSlider.topPadding + customSlider.availableHeight / 2 - height / 2
                width: 20
                height: 20
                radius: 10
                color: customSlider.pressed ? "#13a333" : "#ecf0f1"
                border.color: "#2ecc71"
                border.width: 2

                // 手柄动画
                Behavior on color {
                    ColorAnimation { duration: 100 }
                }
            }
        }
    }
}
